<template>
    <div>
        <div style='margin-bottom: 20px;margin-top: 20px;'>
            <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState"
                @finish="onFinish">
                <a-row :gutter="24">
                    <a-col :span="5">
                        <a-form-item name="nickname" label="用户昵称">
                            <a-input v-model:value="formState[`nickname`]" placeholder="请输入"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="5">
                        <a-form-item name="orderg_uid" label="订单号">
                            <a-input v-model:value="formState[`orderg_uid`]" placeholder="请输入"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item name="submit_date" label="提交时间段">
                            <a-range-picker v-model:value="formState[`submit_date`]" show-time format="YYYY-MM-DD HH:mm:ss"
                                value-format="YYYY-MM-DD HH:mm:ss" />
                        </a-form-item>
                    </a-col>

                    <a-col :span="18">
                        <a-form-item name="type" label="意见类型">
                            <a-radio-group v-model:value="formState['type']">
                                <a-radio-button value="">全部</a-radio-button>
                                <a-radio-button value="功能建议">功能建议</a-radio-button>
                                <a-radio-button value="审核问题">审核问题</a-radio-button>
                                <a-radio-button value="账户问题">账户问题</a-radio-button>
                                <a-radio-button value="操作问题">操作问题</a-radio-button>
                                <a-radio-button value="提现问题">提现问题</a-radio-button>
                                <a-radio-button value="BUG反馈">BUG反馈</a-radio-button>
                                <a-radio-button value="软件问题">软件问题</a-radio-button>
                                <a-radio-button value="其他问题">其他问题</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>

                </a-row>
                <a-row>
                    <a-col :span="24" style="text-align: right">
                        <a-button type="primary" html-type="submit">查询</a-button>
                        <a-button style="margin: 0 8px" @click="() => { formRef.resetFields(); onFinish() }">重置</a-button>

                    </a-col>
                </a-row>
            </a-form>
            <a-table bordered :data-source="dataSource" :columns="columns"
                :pagination="{ current, pageSize, total: totalCount }" @change="pageClick"
                :customRow="record => { return { onClick: () => handleRowClick(record) } }">

                <template #bodyCell="{ column, text, record }">

                    <template v-if="column.dataIndex == 'type'">
                        <a-tag color="purple">{{record.type}}</a-tag>
                    </template>
                </template>
            </a-table>
        </div>
        <a-modal v-model:visible="visible" title="建议详情" :width="850">
            <template #footer>
                <a-button type="primary" @click="handleOk">确定</a-button>
            </template>
            <div class="conent">
                <div class="flexs">
                    <div id="name">
                        {{ data.nickname }}
                    </div>
                    <div class="con">
                        <span>用户UID:</span>
                        <span class="gj">{{ data.user_uid }}</span>
                    </div>
                    <div class="con">
                        <span>订单单号:</span>
                        <span class="gj">{{ data.orderg_uid }}</span>
                    </div>

                    <div class="con">
                        <span>问题类型:</span>
                        <span style="color:#FF7967 ">{{ data.type }}</span>
                    </div>
                    <div class="con">
                        <span>提交时间:</span>
                        <span>{{ data.submit_date }}</span>
                    </div>

                </div>
                <div class="title">问题内容:</div>
                <div style="display: flex;flex-wrap: wrap;">
                    <video 
                        v-if="videoData"
                        style="height: 200px;"
                        :src="share.http + `/${data.mp4_dir}/${data.user_uid}/${videoData}`"
                        controls></video>
                    <template v-else>
                        <a-image :width="200" :src="share.http + `/${data.image_dir}/${data.user_uid}/${item}`"
                        v-for="item in imgsData" />
                    </template>
                    
                </div>

                <textarea  v-model="data.inputs" disabled
                    style="margin-top: 20px; width: 100%;height: 80px;padding: 10px 0 0 12px;box-sizing: border-box;"></textarea>
                <div class="title">
                    <span style="margin-right: 20px;">审核状态:</span>
                    <a-radio-group v-model:value="showForm.value">
                        <a-radio :value="1">审核通过</a-radio>
                        <a-radio :value="2">审核不通过</a-radio>
                    </a-radio-group>
                </div>
                <div class="title" v-show="showForm.value == 2">不通过原因:</div>
                <textarea v-if="showForm.value == 2" v-model="showForm.text"
                    style="width: 100%;height: 80px;padding: 10px 0 0 12px;box-sizing: border-box;"
                    placeholder="请输入内容，但不要出现非法字符'|'"></textarea>
            </div>
        </a-modal>
    </div>
</template>


<script setup>
import { ref, onMounted, reactive } from 'vue'

import { useUserData } from '../../../stores/userData';
import { useRouter } from 'vue-router';
import share from '../../../util/commnet'
import { message } from 'ant-design-vue';
import { feedBackAPI } from '../../../api/feedback';
import {debounce} from 'lodash'
const store = useUserData();
const router = useRouter();


const formRef = ref('');    //搜索数据

const formState = reactive({  //搜素内容
    nickname: '',
    orderg_uid: "",
    submit_date: [],
    type: '',
});
const dataSource = ref([{}]);   //表格数据
const totalCount = ref(0);      //总条
const pageSize = ref(10);       //一页多少条
const current = ref(1);         //当前页
const columns = [{
    title: '用户昵称',
    dataIndex: 'nickname',
    align: 'center'

}, {
    title: '订单uid',
    dataIndex: 'orderg_uid',
    align: 'center'

}, {
    title: "类型",
    dataIndex: "type",
    align: 'center',

}, {
    title: '提交时间',
    dataIndex: 'submit_date',
    align: 'center'

}];
const dis = ref([]);  //是否禁用新增条件
const onFinish = () => {  //条件查询
    pageClick();
}


const debouncedPageClick = debounce(async (item) => {           //进行防抖
    item ? current.value = item.current : current.value = 1;
    let res = await feedBackAPI(`selUser|${formState.nickname}|${formState.orderg_uid}|${formState.type}|${formState.submit_date}|${pageSize.value}|${current.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    console.log(res);
    if (!res || res.code == 406) {                //验证账号状态
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    } else if (res.code != 200) {

        message.error(res.message);
        return
    }
    dataSource.value = res.data
    totalCount.value = res.total - 0;
}, 300);

const pageClick = (item) => {       //页面变化刷新表格
    debouncedPageClick(item);
};




const data = ref({});
const imgsData = ref([]);
const videoData = ref('');
const visible = ref(false);
const showForm = reactive({
    value: '',
    text: ''

})

const handleOk = async () => {                      //点击审核通过触发
    if(showForm.value<1){
        message.error("请选择审核结果");
        return
    }
    if(showForm.text.includes('|')){
        message.error("数据包含非法字符 |")
        return
    }
    let res = await feedBackAPI(`reviewUser|${data.value.feedback_uid}|${showForm.value}|${showForm.value==1?'':showForm.text}|${store.data.token}|${store.data.uuid}|${store.data.phone}`)
    console.log(res);
    if (!res || res.code == 406) {                //验证账号状态
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    } 
    message.success("审核成功");
    visible.value = false; 
    pageClick();
}


const handleRowClick = async (item) => {                //点击单行触发
    imgsData.value = [];        //重置图片
    videoData.value = '';       //重置视频
    let res = await feedBackAPI(`selDanUser|${item.feedback_uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    console.log(res);
    if (!res || res.code == 406) {                //验证账号状态
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    }
    data.value = res.data[0];
    if(data.value.image){
        imgsData.value = data.value.image.split(',');
    }else{
        videoData.value =data.value.mp4;
    }
    visible.value = true;
    showForm.text = ''
    showForm.value = ''
}


onMounted(async () => {                                 //进入页面触发
    let res = await feedBackAPI(`selUser|${formState.nickname}|${formState.orderg_uid}|${formState.type}|${formState.submit_date}|${pageSize.value}|${current.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    console.log(res);
    if (!res || res.code == 406) {                //验证账号状态
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    }
    dataSource.value = res.data;
    totalCount.value = res.total - 0;
})
</script>


<style scoped src="../../css/feedback/feedback.scss" />
